﻿@page "/skull"
@inject NavigationManager Nav
@inject IJSRuntime JSRuntime
@layout EmptyLayout

<PageTitle>Easter egg</PageTitle>

<div class="container text-center">
    <h1 class="display-4" style="font-family: 'Times New Roman', Times, serif; color: black;">
        Try to Click Button One Hundred Times 🥰
    </h1>

    <br />

    <p role="status" class="lead" style="color: black;">
        Current count: <strong>@currentCount</strong>
    </p>

    <button class="btn btn-primary btn-lg" @onclick="IncrementCount">
        Click me 🥵
    </button>

    <br /><br />

    <a href="/login" class="btn btn-secondary">No Verbose to Login</a>
</div>

@code {
    private int currentCount = 0;

    private async Task IncrementCount()
    {
        currentCount++;

        if (currentCount == 100)
        {
            // 使用 JavaScript 弹窗提示用户
            await JSRuntime.InvokeVoidAsync("alert", "Wow, you made me Come !🎉");
        }
    }
}

<style>
    .container {
        margin-top: 50px;
    }

    .display-4 {
        font-size: 2.5rem;
        font-weight: bold;
    }

    .btn-lg {
        padding: 10px 20px;
        font-size: 1.25rem;
    }

    .btn-secondary {
        margin-top: 20px;
    }
</style>